<script lang="ts" setup>
import {onMounted, onUnmounted, ref} from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import iconTeam from './icon/logo.png'
import mittBus from '@/utils/mittBus.ts'

defineOptions({
	name: 'BaseMap'
})
const props = defineProps({
	isAddPoint: Boolean // 是否点击的时候添加点到地图上
})
let map: any = null
const mapValue = ref('')
const emit = defineEmits(['getLatLng', 'handleMarker'])
let AMapObj: any = null
onMounted(() => {
	window['_AMapSecurityConfig'] = {
		securityJsCode: 'aae9048fa745561e4c6bbd4b18226e26' // 密钥
	}
	AMapLoader.load({
		key: '4201bff2d66883d4f845da9485832f57',
		version: '2.0',
		plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete']
	})
		.then((AMap) => {
			AMapObj = AMap
			map = new AMap.Map('container', {
				viewMode: '3D', // 是否为3D地图模式
				zoom: 11, // 初始化地图级别
				center: [118.76, 32.06], // 初始化地图中心点位置
				mapStyle: 'amap://styles/fresh'
			})
			const ToolBar = new AMap.ToolBar() //创建工具条插件实例
			const Scale = new AMap.Scale()
			const auto = new AMap.AutoComplete({input: 'searchInputId'})
			const placeSearch = new AMap.PlaceSearch({map: map})
			auto.on('select', (e: any) => {
				placeSearch.setCity(e.poi.adcode)
				placeSearch.search(e.poi.name)
			})

			if (props.isAddPoint) {
				map.on('click', (e: any) => {
					let latLng = {
						lat: e.lnglat.lat,
						lng: e.lnglat.lng
					}
					drawMarker(latLng, false)
					emit('getLatLng', latLng)
				}, false)
			}
			map.addControl(ToolBar)
			map.addControl(Scale)
		})
		.catch((e) => {
			console.log(e)
		})
})
let marker: any = null
const drawMarker = (location: any, isRepeat: boolean, item?: any) => {
	if (location == null) return
	let longitude = location.lng, latitude = location.lat
	if (marker && !isRepeat) {
		marker.setMap(null)
	}
	marker = new AMapObj.Marker({
		position: new AMapObj.LngLat(longitude, latitude),
		anchor: 'bottom-center',
		icon: new AMapObj.Icon({
			size: new AMapObj.Size(22, 22),
			image: iconTeam,
			imageSize: new AMapObj.Size(22, 22),
			imageOffset: new AMapObj.Pixel(0, 0)
		}),
		label: {
			content: item?.name ? `<span>${item.name}</span>` : ''
		}
	})
	marker.on('click', (e: any) => {
		emit('handleMarker', item ? {e, item} : {e})
	}, false)
	map.add(marker)
	//map.setZoomAndCenter(11, [longitude, latitude])
}
mittBus.on('setMapTheme', (val) => {
	setTimeout(() => {
		let type = val ? 'amap://styles/darkblue' : 'amap://styles/fresh'
		setTheme(type)
		const elem = document.getElementsByClassName('amap-sug-result')[0]
		elem?.setAttribute('style', `background-color: ${val ? '#000' : '#fefefe'};`)
	}, 500)
})
const setTheme = (type: string) => {
	map && map.setMapStyle(type)
}
defineExpose({
	AMapObj,
	drawMarker
})

onUnmounted(() => {
	map?.destroy()
})
</script>

<template>
	<div class="base-map">
		<div id="container"/>
		<div class="base-map-search">
			<el-input
				id="searchInputId"
				v-model="mapValue"
				class="common-layout"
				placeholder="输入关键词搜索位置"
				size="small"
			/>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.base-map {
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
	width: 100%;
	height: 100%;
	position: relative;

	&-search {
		width: 300px;
		position: absolute;
		top: 10px;
		left: 10px;
		display: flex;
	}
}

#container {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

:deep(.amap-logo) {
	display: none !important;
}

:deep(.amap-copyright) {
	display: none !important;
}
</style>
